<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章发布</title>
    <!-- 引入 Semantic UI 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
    <!-- 引入 SimpleMDE Markdown 编辑器的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <link rel="stylesheet" href="css/文章发布.css" />
</head>
<body>

    <!-- 导航栏 -->
    <nav class="ui inverted  attached segment m-padded-tb-mini">
    	<div class="ui container">
    	<div class="ui inverted secondary menu">
    		<h2 class="ui teal header item">管理后台</h2>
    		<a class="item" href="首页.html">
    		    <i class="home icon"></i> 博客首页
    		</a>
    		<a class="item" href="文章管理.html">
    		    <i class="write icon"></i> 文章管理
    		</a>
    		<a class="item active" href="文章发布.html">
    		    <i class="edit icon"></i> 文章发布
    		</a>
    		<a class="item" href="分类管理.html">
    		    <i class="folder open icon"></i> 分类管理
    		</a>
    		<a class="item" href="标签管理.html">
    		    <i class="tag icon"></i> 标签管理
    		</a>
    		<a class="item" href="用户管理.html">
    		    <i class="settings icon"></i> 用户管理
    		</a>
    		<div class="right menu">
    			<div class="ui dropdown item">
    				<div class="text">
    					<img class="ui avatar image" src="images/屏幕截图 2024-04-28 125007.png">
    					用户名
    				</div>
    				<i class="dropdown icon"></i>
    				<div class="menu">
    					<a href="#" class="item">注销</a>
    					
    				</div>	
    			</div>
    			
    		</div>
    		</div>
    	</div>
    </nav>
    

    <!-- 页面内容 -->
    <div class="main container">
        <h1 class="ui header">发布新文章</h1>
        <form class="ui form">
            <div class="two fields">
                <div class="field">
                    <label>标题</label>
                    <input type="text" name="title" placeholder="请输入文章标题">
                </div>
                <div class="field">
                    <label>创建时间</label>
                    <input type="text" name="date" placeholder="请输入日期">
                </div>
            </div>
            <div class="field">
                <label>内容</label>
                <textarea id="content" name="content" rows="4" placeholder="请输入文章内容"></textarea>
            </div>
            <div class="two fields">
                <div class="field">
                    <label>分类</label>
                    <select class="ui dropdown" name="category">
                        <option value="">请选择分类</option>
                        <option value="1">分类1</option>
                        <option value="2">分类2</option>
                        <!-- 更多分类选项 -->
                    </select>
                </div>
                <div class="field">
                    <label>标签</label>
                    <select class="ui dropdown multiple" name="tags" multiple>
                        <option value="">请选择标签</option>
                        <option value="tag1">标签1</option>
                        <option value="tag2">标签2</option>
                        <!-- 更多标签选项 -->
                    </select>
                </div>
            </div>
			 <div class="field">
			                <label>博客首图</label>
			                <div class="ui action input">
			                    <input type="text" readonly placeholder="上传博客首图">
			                    <input type="file" name="image" style="display: none;">
			                    <button class="ui button">上传</button>
			                </div>
			            </div>
            <div class="ui buttons">
                <button class="ui button" type="button">保存文章</button>
                <button class="ui button primary" type="submit">发布文章</button>
            </div>
        </form>
    </div>

    <!-- 引入 Semantic UI 的 JavaScript 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
    <!-- 引入 SimpleMDE Markdown 编辑器的 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
    <script>
        $(document).ready(function() {
            // 初始化 Semantic UI 的下拉框
            $('.ui.dropdown').dropdown();
            // 初始化 Markdown 编辑器
            var simplemde = new SimpleMDE({ element: document.getElementById("content") });
        });
    </script>
	 <script>
	        $(document).ready(function() {
	            $('.ui.dropdown').dropdown();
	            // 文件上传交互
	            $('.ui.action.input .button').on('click', function() {
	                $(this).closest('.ui.action.input').find('input[type="file"]').trigger('click');
	            });
	            $('.ui.action.input input[type="file"]')
	                .on('change', function() {
	                    // 获取文件名并显示在输入框中
	                    var fileName = $(this).val().split('\\').pop();
	                    $(this).closest('.ui.action.input').find('input[type="text"]').val(fileName);
	                });
	        });
	    </script>

</body>
</html>